﻿﻿<template>
  <div class="box">
    <!-- 面包削 -->

    <div class="title">投诉建议列表</div>

    <div>
      <!-- <el-card class="box-card"> -->

      <div class="search">
        <span>投诉标签:</span>

        <el-input
          v-model="query.idorname"
          class="sname"
          placeholder="投诉标签"
          style="width: 150px; margin-right: 30px"
        />
      </div>

      <div class="search">
        <span>地址:</span>

        <el-input
          v-model="query.address"
          class="sname"
          placeholder="地址"
          style="width: 150px; margin-right: 30px"
        />
      </div>

      <div class="search">
        <span>电话:</span>

        <el-input
          v-model="query.tel"
          class="sname"
          placeholder="电话"
          style="width: 150px; margin-right: 20px"
        />
      </div>

      <div class="search">
        <el-dropdown>
          按时间查询：

          <el-date-picker
            v-model="value2"
            type="datetimerange"
            start-placeholder="开始日期"
            至
            end-placeholder="结束日期"
            style="width: 200px; margin-right: 10px"
            :default-time="defaultTime2"
          >
          </el-date-picker>
        </el-dropdown>
      </div>

      <div class="search">
        投诉状态：<el-dropdown>
          <el-select
            v-model="query.name"
            placeholder="请选择"
            class="input2"
            style="width: 160px; margin-right: 0px"
          >
            <el-option
              v-for="item in getstatelist"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              style="width: 100px"
            >
            </el-option>
          </el-select>
        </el-dropdown>
      </div>

      <div class="search" style="margin-right: 10px">
        投诉类型：<el-dropdown>
          <el-select
            v-model="query.question"
            placeholder="请选择"
            class="input2"
            style="width: 150px"
          >
            <el-option
              v-for="item in getquestionlist"
              :key="item.id"
              :label="item.name"
              :value="item.name"
              style="width: 100px"
            >
            </el-option>
          </el-select>
        </el-dropdown>
      </div>

      <div class="search" style="margin-left: 0px; margin-top: 30px">
        <span>居民:</span>
        <el-input
          v-model="pages.key"
          class="sname"
          placeholder="请输入关键字"
          style="width: 150px"
        />
      </div>
   <div class="cardbtn">
        <el-button
          type="primary"
          class="query"
          @click="complaintlisst()"
          style="width: 100px"
          >查询</el-button
        >

        <!-- <el-button>重置</el-button> -->
      </div>

      <!-- </el-card> -->

      <div class="btn">
        <el-button type="danger" class="button" @click="moredel()"
          >批量删除</el-button
        >
      </div>
     
    </div>

    <div class="conts">
      <el-table
        size="mini"
        @selection-change="handleSelectionChange"
        :data="complaintlist"
        background-colog
        border
        style="width: 100%"
      >
        <el-table-column type="selection" width="55" background-color="#eeeeee">
        </el-table-column>

        <el-table-column prop="id" label="ID" width="160"> </el-table-column>

        <el-table-column prop="type" label="问题类型"> </el-table-column>

        <el-table-column prop="address" label="问题地址"> </el-table-column>

        <el-table-column prop="content" label="问题描述"> </el-table-column>

        <el-table-column prop="state" label="处理状态"> </el-table-column>

        <el-table-column prop="username" label="业主名称"> </el-table-column>

        <el-table-column prop="tel" label="业主电话"> </el-table-column>

        <el-table-column prop="addtime" label="维修日期"> </el-table-column>

        <el-table-column prop="operation" label="操作">
          <template v-slot:default="scope">
            <!-- <el-button type="primary" size="mini" round>编辑</el-button> -->
            <!-- <el-button
              type="success"
              size="mini"
              class="but"
              @click="dialogVisible = true"
              >修改</el-button
            > -->
            <el-button
              type="danger"
              size="mini"
              class="button"
              @click="open(scope.row.id)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- ··········分页············· -->

    <div class="block">
      <el-pagination
        style="margin-top: 30px"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pages.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pages.psize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="pages.total"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import {
  complaintlist,
  getstatelist,
  getquestionlist,
  complaintdelete,
  userinfoDelAll,
} from "../../api/user.js";
var token = sessionStorage.getItem("token");

export default {
  data() {
    return {
      pages: {
        page: 1,
        psize: 5,
        total: 0,
      },
      myHeaders: { Authorization: token },
      value: [],
      tableData: [],
      multipleSelection: [],
      centerDialogVisible: false,
      order_status: [],
      addform: {
        label: [],
      },
      query: [],
      list: [],
      getstatelist: [],
      complaintlist: [],
      getquestionlist: [],
      userinfoDelAll: [],
      getinmates: [],
      querylist: [],
      value2: "",
      state: "",
      type: "",
      key: "",
      defaultTime2: [
        new Date(2000, 1, 1, 12, 0, 0),
        new Date(2000, 2, 1, 8, 0, 0),
      ], // '12:00:00', '
      selectID: 0,
    };
  },
  //投诉列表渲染
  methods: {
    async complaintlisst() {
      const res = await complaintlist({
        page: this.pages.page,
        psize: this.pages.psize,
        key: this.pages.key,
      });
      this.complaintlist = res.data.list;
      this.pages.total = res.data.counts;

      console.log(res.data.list);
    },
    //投诉状态渲染
    async getstatelisst() {
      const res = await getstatelist();
      this.getstatelist = res.data.list;
    },
    //投诉类型渲染
    async getquestionlisst() {
      const res = await getquestionlist();
      this.getquestionlist = res.data.list;
    },
    //批量删除
    moredel() {
      let ids = this.multipleSelection;

      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",

        cancelButtonText: "取消",

        type: "warning",
      })
        .then(() => {
          userinfoDelAll({ ids }).then((res) => {
            console.log(11);

            if (res.errCode == 10000) {
              this.complaintlisst();
            }
          });

          this.$message({
            type: "success",

            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",

            message: "已取消删除",
          });
        });
    },
    // 单删除
    open(id) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          complaintdelete({ id: id }).then((res) => {
            console.log(res);
            if (res.errCode == 10000) {
              this.complaintlisst();
            }
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSelectionChange(val) {
      this.multipleSelection = [];

      for (let selectedItem of val) {
        this.multipleSelection.push(selectedItem.id);
      }
    },
    handleSizeChange(val) {
      this.pages.psize = val;

      console.log(`每页 ${val} 条`);

      console.log(this.pages.psize);

      this.complaintlisst();
    },

    handleCurrentChange(val) {
      this.pages.page = val;
      console.log(`当前页: ${val}`);
      console.log(this.pages.page);
      this.complaintlisst();
    },
    handleAvatarSuccess(res, file) {
      console.log(res);
      this.addform.image = [];
      this.addform.image.push(res.data.src);
    },
    // 上传图片
    handleAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error("上传头像图片只能是JPG格式");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过2MB!");
      }
      return isJPG && isLt2M;
    },
  },
  mounted() {
    this.complaintlisst(), this.getstatelisst(), this.getquestionlisst();
  },
};
</script>

<style lang="less" scoped>
.title {
  font-size: 20px;

  color: rgb(108, 127, 244);

  width: 100%;

  height: 60px;

  border-bottom: 1px solid #eeeeee;
}

.time {
  margin-left: 20px;
}

.card-header {
  display: flex;

  justify-content: space-between;

  align-items: center;
}

.text {
  font-size: 14px;
}

.hospital {
  margin-bottom: 18px;
}

.box-card {
  width: 480px;

  height: 160px;
}

.sname {
  width: 200px;

  margin-left: 15px;
}

.box-card {
  width: 100%;

  margin-top: 30px;
}

.search {
  float: left;

  height: 40px;
}

.adress {
  float: left;

  margin-left: 30px;
}

.ins {
  float: left;

  margin-left: 30px;
}

.select {
  margin-left: 10px;

  width: 120px;
}

.btn {
  // float: left;
  margin-left: 60px;
  width: 100px;
    // margin: 40px;
}

.conts {
  margin-top: 70px;
}

.block {
  margin-top: 15px;
}

.cardbtn {
  margin-top: 70px;

  margin-left: 30%;
}

.block {
  text-align: center;

  margin-top: 20px;
}

.query {
  float: left;

  margin-left: -240px;

  margin-top: 30px;
}
.button{
  // margin-top: 20px;
  margin: 20px 0 -50px;
}
</style>